<template>
  <!-- sku销售情况 -->
  <el-dialog
    :title="$t('sku销售情况')"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    width="90%"
    :before-close="cancel"
  >
    <el-date-picker
      class="mb8"
      @change="getList"
      :clearable="false"
      v-model="time"
      type="daterange"
      value-format="yyyy-MM-dd"
    />

    <el-table
      :row-class-name="({ row }) => handleRowClassName(row)"
      ref="TableRef"
      :data="tableData"
      :height="calTableHeight() - 100"
    >
      <!-- 序号 -->
      <el-table-column :label="$t('序号')" align="center" type="index" />

      <el-table-column show-overflow-tooltip label="sku" align="center" prop="skuNo" />
      <!-- 库位号 -->
      <el-table-column show-overflow-tooltip :label="$t('库位号')" align="center" prop="spNo" />

      <!-- 取消订单 -->
      <el-table-column show-overflow-tooltip :label="$t('取消订单')" align="center" prop="delFlag">
        <template slot-scope="{ row }">
          <!-- 取消订单 0：否，1：是 -->
          <div style="color: green" v-if="row.delFlag == 0">
            {{ $t('否') }}
          </div>
          <div style="color: red" v-if="row.delFlag == 2">
            {{ $t('是') }}
          </div>
        </template>
      </el-table-column>
      <!-- 申请时价格 -->
      <el-table-column show-overflow-tooltip :label="$t('申请时价格')" align="center" prop="applyPrice">
        <template slot-scope="{ row }">
          <div>{{ row.applyPrice ? (+row.applyPrice).toFixed() : '' | thousand }}</div>
        </template>
      </el-table-column>
      <!-- 需要付款数量 -->
      <el-table-column show-overflow-tooltip :label="$t('需要付款数量')" align="center" prop="handleWaitPayNum" />
      <!-- 已付款数量 -->
      <el-table-column show-overflow-tooltip :label="$t('已付款数量')" align="center" prop="handlePayNum" />
      <!-- 未付款总价格 -->
      <el-table-column show-overflow-tooltip :label="$t('未付款总价格')" align="center" prop="waitPayTotal">
        <template slot-scope="{ row }">
          <div>{{ row.waitPayTotal ? (+row.waitPayTotal).toFixed() : '' | thousand }}</div>
        </template>
      </el-table-column>
      <!-- 已付款总价格 -->
      <el-table-column show-overflow-tooltip :label="$t('已付款总价格')" align="center" prop="payTotal">
        <template slot-scope="{ row }">
          <div>{{ row.payTotal ? (+row.payTotal).toFixed() : '' | thousand }}</div>
        </template>
      </el-table-column>
      <!-- 总价值 -->
      <el-table-column show-overflow-tooltip :label="$t('总价值')" align="center" prop="totalPrice">
        <template slot-scope="{ row }">
          <div>{{ row.totalPrice ? (+row.totalPrice).toFixed() : '' | thousand }}</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        <!-- 关闭 -->
        {{ $t('关闭') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { batchSkuSell } from '@/api/distribution/orderBatchs/index'
import handleSum from '@/utils/handleSum'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'orderNum',
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      time: [],
      handleSum,
      tableData: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
    }
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.time = this.formData.time || []
        this.getList()
      }
    },
  },
  methods: {
    handleRowClassName(row) {
      if (row.delFlag == 2) {
        return 'delFlag-2'
      }
    },
    getList() {
      const data = {
        startTime: this.time[0],
        endTime: this.time[1],
        shopId: this.formData.shopId,
        /**
         * 是否排除线下店铺 0-否 1-是
         */
        isExclude: this.formData.isExclude,
        ...this.queryParams,
      }
      batchSkuSell(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
